<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:s="http://jboss.org/seam/faces"
      xml:lang="en" lang="en">

<ui:composition template="/resources/layout.xhtml">
    <ui:define name="title"></ui:define>
    <ui:define name="content">
        <div class="all_loan_list_page">
            <div>contract list</div>
            <h:form>
                <div class="for_add_form">
                    <div class="add_form">
                        <table>
                            <tr>
                                <td style="width:110px;"><div><h:outputText value="Сумма займа:" /></div></td>
                                <td><div><h:inputText value="#{contractAction.loanModel.amount}" /></div></td>
                            </tr>
                            <tr>
                                <td><div><h:outputText value="Срок займа:" /></div></td>
                                <td><div>
                                    <rich:inputNumberSpinner
                                        value="#{contractAction.loanModel.period}"
                                        maxValue="21"
                                        minValue="7"/>
                                </div></td>
                            </tr>
                            <tr>
                                <td><div>Заемщик: </div></td>
                                <td><div>
                                    <rich:autocomplete
                                            value="#{contractAction.currentDebtorStr}"
                                            mode="ajax"
                                            autocompleteMethod="#{contractAction.autocomplete}" >
                                    </rich:autocomplete>
                                    <h:commandButton value=" " styleClass="addDeptorButton">
                                        <rich:componentControl target="popupAddDebtor" operation="show"/>
                                    </h:commandButton>
                                </div></td>
                            </tr>
                            <tr>
                                <td colspan="2"><div class="addNewContractButton">
                                    <a4j:commandButton value="Заключить"
                                                       action="#{contractAction.addNewContract}"
                                                       render="loanList"/>
                                </div>
                                <div style="clear:both;" />
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <rich:dataTable id="loanList" value="#{contractAction.contractList}" var="contract" >
                    <rich:column sortBy="#{contract.debtor.FIO}"
                                 sortOrder="#{contractAction.contractListSort.debtorOrder}"
                                 styleClass="#{contract.loanOverdue ? '' : 'overdue'}"
                            >
                        <f:facet name="header">
                            <a4j:commandLink value="Заемщик"
                                             render="loanList"
                                             styleClass="fake-app"
                                             action="#{contractAction.contractListSort.sortByDebtor}" />
                        </f:facet>
                        <h:outputText value="#{contract.debtor.FIO}" />
                    </rich:column>

                    <rich:column sortBy="#{contract.amount}"
                                 sortOrder="#{contractAction.contractListSort.amountOrder}"
                                 styleClass="#{contract.loanOverdue ? '' : 'overdue'} number-column">
                        <f:facet name="header">
                            <a4j:commandLink value="Сумма займа"
                                             styleClass="fake-app"
                                             render="loanList"
                                             action="#{contractAction.contractListSort.sortByAmount}" />
                        </f:facet>
                        <h:outputText value="#{contract.amount}" >
                            <f:convertNumber pattern="###,##0.0" />
                        </h:outputText>
                    </rich:column>

                    <rich:column sortBy="#{contract.createDate}"
                                 sortOrder="#{contractAction.contractListSort.createDateOrder}"
                                 styleClass="#{contract.loanOverdue ? '' : 'overdue'} date-column">
                        <f:facet name="header">
                            <a4j:commandLink value="Дата заключения договора"
                                             render="loanList"
                                             styleClass="fake-app"
                                             action="#{contractAction.contractListSort.sortByCreateDate}" />
                        </f:facet>
                        <h:outputText value="#{contract.createDateStr}" />
                    </rich:column>

                    <rich:column sortBy="#{contract.period}"
                                 sortOrder="#{contractAction.contractListSort.periodOrder}"
                                 styleClass="#{contract.loanOverdue ? '' : 'overdue'} number-column">
                        <f:facet name="header">
                            <a4j:commandLink value="Срок займа"
                                             render="loanList"
                                             styleClass="fake-app"
                                             action="#{contractAction.contractListSort.sortByPeriod}" />
                        </f:facet>
                        <h:outputText value="#{contract.period}" styleClass="number" />
                    </rich:column>

                    <rich:column sortBy="#{contract.plannedAmount}"
                                 sortOrder="#{contractAction.contractListSort.plannedAmountOrder}"
                                 styleClass="#{contract.loanOverdue ? '' : 'overdue'} number-column">
                        <f:facet name="header">
                            <a4j:commandLink value="Сумма долга"
                                             styleClass="fake-app"
                                             render="loanList"
                                             action="#{contractAction.contractListSort.sortByPlannedAmount}" />
                        </f:facet>
                        <h:outputText value="#{contract.plannedAmount}">
                            <f:convertNumber pattern="###,##0.0" />
                        </h:outputText>
                    </rich:column>

                    <rich:column sortBy="#{contract.plannedDate}"
                                 sortOrder="#{contractAction.contractListSort.plannedDateOrder}"
                                 styleClass="#{contract.loanOverdue ? '' : 'overdue'} date-column">
                        <f:facet name="header">
                            <a4j:commandLink value="Дата исполнения обязательств"
                                             render="loanList"
                                             styleClass="fake-app"
                                             action="#{contractAction.contractListSort.sortByPlannedDate}" />
                        </f:facet>
                        <h:outputText value="#{contract.plannedDateStr}" />
                    </rich:column>

                </rich:dataTable>
            </h:form>
        </div>


        <rich:popupPanel id="popupAddDebtor" modal="true" autosized="true">
            <f:facet name="header" >
                <h:outputText value="Добавление нового заемщика"/>
            </f:facet>
            <f:facet name="controls">
                <h:outputLink value="#" onclick="hidePopupAddDebtor();" >
                    X
                </h:outputLink>
                <a4j:jsFunction name="hidePopupAddDebtor"
                    action="#{contractAction.resetDebtorModel}"
                    oncomplete="#{rich:component('popupAddDebtor')}.hide(); return false;"/>
            </f:facet>
            <div>
                <h:form>
                    <table>
                        <tr>
                            <td><div><h:outputText value="Фамилия:"/></div></td>
                            <td><div><h:inputText value="#{contractAction.debtorModel.lastName}"/></div></td>
                        </tr>
                        <tr>
                            <td><div><h:outputText value="Имя:"/></div></td>
                            <td><div><h:inputText value="#{contractAction.debtorModel.firstName}"/></div></td>
                        </tr>
                        <tr>
                            <td><div><h:outputText value="Отчество:" /></div></td>
                            <td><div><h:inputText value="#{contractAction.debtorModel.middleName}" /></div></td>
                        </tr>
                        <tr>
                            <td><div><h:outputText value="День рождения:"/></div></td>
                            <td><div>
                                <rich:calendar
                                        value="#{contractAction.debtorModel.birthday}"
                                        datePattern="dd.MM.yyyy"
                                />
                            </div></td>
                        </tr>
                        <tr>
                            <td><div></div></td>
                            <td><div></div></td>
                        </tr>
                        <tr>
                            <td><div>
                                <a4j:commandButton
                                        value="Добавить"
                                        action="#{contractAction.addNewDebtor}"
                                        oncomplete="hidePopupAddDebtor();" />
                            </div></td>
                        </tr>
                    </table>
                </h:form>
            </div>
        </rich:popupPanel>

        <a4j:status startStyleClass="popup_overlay">
            <f:facet name="start">
                <h:graphicImage value="/resources/img/ajax-loader.gif" alt="ai" styleClass="popup-ajax-loader" />
            </f:facet>
        </a4j:status>
    </ui:define>
</ui:composition>

</html>
